{% extends 'base.html' %}
{% block title %}
<title>book_details</title>
{% endblock %}
{% block body %}

<div class="row col-md-8 col-md-offset-2">
{% for p in page %}
<div class="media">
  <div class="media-left media-middle">
      <img class="media-object" src="static/img/collected.png" alt="...">
  </div>
  <div class="media-body">
    <h4 class="media-heading">{{ p.title }}</h4>
    <p>{{ p.details }}</p>
  </div>
</div>
  <hr>
{% endfor %}

  <nav aria-label="Page navigation">
  <ul class="pagination">
    {% if page.has_previous %}
    <li>
      <a href="?page={{ page.previous_page_number }}" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    {% endif %}


    {% for i in page.paginator.get_elided_page_range%}
    {% if page.number ==  i  %}
    <li class="active"><a href="?page={{ i }}">{{ i }}</a></li>
    {% else %}
    <li><a href="?page={{ i }}">{{ i }}</a></li>
    {% endif %}
    {% endfor %}



    {% if page.has_next %}
    <li>
      <a href="?page={{ page.next_page_number }}" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
    {% endif %}




  </ul>
</nav>





</div>


{% endblock %}